<template>
    <div class="category-detail-page">
        <el-card shadow="never">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="130px"
                ref="form"
                :rules="rules">
                <el-form-item label="服务协议内容" prop="content">
                    <tinymce v-model="form.content"></tinymce>
                </el-form-item>
            </el-form>
            <div class="text-center">
                <el-button :loading="posting" type="primary" @click="onSave">保 存</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import Tinymce from '../../components/base/Tinymce';

export default {
    components: {
        Tinymce,
    },
    data() {
        return {
            posting: false,
            form: {
                id: '',
                key: 'agreement',
                content: '',
            },
            rules: {
                content: [
                    { required: true, message: '内容不能为空', trigger: 'blur' },
                ],
            },
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate(async (valid) => {
                if (!valid) return;
                this.posting = true;
                if (this.form.id) {
                    API.put(`setting/${this.form.id}`, this.form).then(() => {
                        this.posting = false;
                        $ele.$message.success('保存成功');
                        this.fetchData();
                    }).catch(err => {
                        $ele.$message.error(err.message);
                    }).finally(() => this.posting = false);
                } else {
                    API.post('setting', this.form).then(() => {
                        this.posting = false;
                        $ele.$message.success('保存成功');
                        this.fetchData();
                    }).catch(err => {
                        $ele.$message.error(err.message);
                    }).finally(() => this.posting = false);
                }
            });
        },
        fetchData() {
            API.get('setting/agreement').then((res) => {
                for (const i of Object.keys(this.form)) {
                    if (res[i] || res[i] === 0) this.form[i] = res[i];
                }
            });
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.category-detail-page {
    .input-width {
        width: 300px;
    }
    .picture {
        width: 200px;
        height: 200px;
        line-height: 200px;
    }
    .uploader-icon {
        font-size: 20px;
        color: #8c939d;
        text-align: center;
    }
    .image-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .video-upload {
        text-align: center;
    }
}
</style>
